<template>
  <view class="order-detail">
    <!-- 订单状态 -->
    <view class="order-status">
      <view class="order-status__icon">
        <text v-if="orderInfo.status === 'pending'" class="status-icon status-icon--pending">⏱️</text>
        <text v-else-if="orderInfo.status === 'processing'" class="status-icon status-icon--processing">🔄</text>
        <text v-else-if="orderInfo.status === 'completed'" class="status-icon status-icon--completed">✅</text>
        <text v-else-if="orderInfo.status === 'cancelled'" class="status-icon status-icon--cancelled">❌</text>
      </view>
      <view class="order-status__text">
        <text class="order-status__title">{{ getStatusText(orderInfo.status) }}</text>
        <text class="order-status__desc">{{ getStatusDescription(orderInfo.status) }}</text>
      </view>
    </view>
    
    <!-- 订单进度 -->
    <view class="order-progress">
      <view 
        v-for="(step, index) in orderSteps" 
        :key="index" 
        class="order-progress__item"
        :class="{
          'order-progress__item--active': index <= currentStepIndex,
          'order-progress__item--last': index === orderSteps.length - 1
        }"
      >
        <view class="order-progress__dot"></view>
        <view class="order-progress__content">
          <text class="order-progress__title">{{ step.title }}</text>
          <text class="order-progress__time">{{ step.time || '' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 订单信息 -->
    <view class="order-card">
      <view class="order-card__header">
        <text class="order-card__title">订单信息</text>
      </view>
      <view class="order-card__content">
        <view class="order-info-item">
          <text class="order-info-item__label">订单编号</text>
          <text class="order-info-item__value">{{ orderInfo.orderNo }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">下单时间</text>
          <text class="order-info-item__value">{{ orderInfo.createTime }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">支付方式</text>
          <text class="order-info-item__value">{{ orderInfo.paymentMethod }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">订单备注</text>
          <text class="order-info-item__value">{{ orderInfo.remark || '无' }}</text>
        </view>
      </view>
    </view>
    
    <!-- 服务信息 -->
    <view class="order-card">
      <view class="order-card__header">
        <text class="order-card__title">服务信息</text>
      </view>
      <view class="order-card__content">
        <view class="service-item">
          <image :src="orderInfo.service.image" mode="aspectFill" class="service-item__image" />
          <view class="service-item__content">
            <text class="service-item__title">{{ orderInfo.service.title }}</text>
            <text class="service-item__option">{{ orderInfo.service.option }}</text>
            <view class="service-item__bottom">
              <text class="service-item__price">{{ orderInfo.service.price }}</text>
              <text class="service-item__quantity">x{{ orderInfo.service.quantity }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 收货信息 -->
    <view class="order-card" v-if="orderInfo.deliveryInfo">
      <view class="order-card__header">
        <text class="order-card__title">收货信息</text>
      </view>
      <view class="order-card__content">
        <view class="order-info-item">
          <text class="order-info-item__label">收货人</text>
          <text class="order-info-item__value">{{ orderInfo.deliveryInfo.name }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">联系电话</text>
          <text class="order-info-item__value">{{ orderInfo.deliveryInfo.phone }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">收货地址</text>
          <text class="order-info-item__value">{{ orderInfo.deliveryInfo.address }}</text>
        </view>
        <view class="order-info-item">
          <text class="order-info-item__label">送达时间</text>
          <text class="order-info-item__value">{{ orderInfo.deliveryInfo.time }}</text>
        </view>
      </view>
    </view>
    
    <!-- 配送人员信息 -->
    <view class="order-card" v-if="orderInfo.deliveryStaff && orderInfo.status !== 'cancelled'">
      <view class="order-card__header">
        <text class="order-card__title">配送人员</text>
      </view>
      <view class="order-card__content delivery-staff">
        <view class="delivery-staff__info">
          <image :src="orderInfo.deliveryStaff.avatar" class="delivery-staff__avatar" />
          <view class="delivery-staff__detail">
            <text class="delivery-staff__name">{{ orderInfo.deliveryStaff.name }}</text>
            <text class="delivery-staff__id">工号：{{ orderInfo.deliveryStaff.id }}</text>
          </view>
        </view>
        <view class="delivery-staff__contact">
          <button class="delivery-staff__btn" @click="callDeliveryStaff">电话联系</button>
        </view>
      </view>
    </view>
    
    <!-- 价格信息 -->
    <view class="order-card">
      <view class="order-card__header">
        <text class="order-card__title">价格信息</text>
      </view>
      <view class="order-card__content">
        <view class="order-info-item">
          <text class="order-info-item__label">服务费用</text>
          <text class="order-info-item__value">¥{{ orderInfo.price.service.toFixed(2) }}</text>
        </view>
        <view class="order-info-item" v-if="orderInfo.price.delivery > 0">
          <text class="order-info-item__label">配送费</text>
          <text class="order-info-item__value">¥{{ orderInfo.price.delivery.toFixed(2) }}</text>
        </view>
        <view class="order-info-item" v-if="orderInfo.price.discount > 0">
          <text class="order-info-item__label">优惠金额</text>
          <text class="order-info-item__value order-info-item__value--discount">-¥{{ orderInfo.price.discount.toFixed(2) }}</text>
        </view>
        <view class="order-info-item order-info-item--total">
          <text class="order-info-item__label">实付金额</text>
          <text class="order-info-item__value order-info-item__value--total">¥{{ orderInfo.price.total.toFixed(2) }}</text>
        </view>
      </view>
    </view>
    
    <!-- 底部操作按钮 -->
    <view class="order-detail__footer">
      <view class="order-detail__btns">
        <!-- 待付款状态 -->
        <block v-if="orderInfo.status === 'pending'">
          <button class="order-btn order-btn--default" @click="cancelOrder">取消订单</button>
          <button class="order-btn order-btn--primary" @click="payOrder">立即支付</button>
        </block>
        
        <!-- 进行中状态 -->
        <block v-else-if="orderInfo.status === 'processing'">
          <button class="order-btn order-btn--default" @click="contactService">联系客服</button>
          <button class="order-btn order-btn--primary" @click="confirmReceived">确认完成</button>
        </block>
        
        <!-- 已完成状态 -->
        <block v-else-if="orderInfo.status === 'completed' && !orderInfo.reviewed">
          <button class="order-btn order-btn--default" @click="orderAgain">再次下单</button>
          <button class="order-btn order-btn--primary" @click="goToReview">评价服务</button>
        </block>
        
        <!-- 已完成已评价 -->
        <block v-else-if="orderInfo.status === 'completed' && orderInfo.reviewed">
          <button class="order-btn order-btn--default" @click="contactService">联系客服</button>
          <button class="order-btn order-btn--primary" @click="orderAgain">再次下单</button>
        </block>
        
        <!-- 已取消状态 -->
        <block v-else-if="orderInfo.status === 'cancelled'">
          <button class="order-btn order-btn--default" @click="deleteOrder">删除订单</button>
          <button class="order-btn order-btn--primary" @click="orderAgain">再次下单</button>
        </block>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';

// 订单信息
const orderInfo = reactive({
  id: 1001,
  orderNo: 'FW20250429152533',
  createTime: '2025-04-29 15:25:33',
  status: 'processing', // pending(待支付), processing(进行中), completed(已完成), cancelled(已取消)
  paymentMethod: '微信支付',
  remark: '请尽快配送，谢谢！',
  service: {
    id: 1,
    title: '快递代拿服务',
    option: '普通件 (2kg以内)',
    price: '¥5.00',
    quantity: 1,
    image: 'https://picsum.photos/seed/service1/300/200'
  },
  deliveryInfo: {
    name: '张三',
    phone: '137****6666',
    address: '北京大学45号宿舍楼303室',
    time: '今日 18:00-19:00'
  },
  deliveryStaff: {
    id: 'S12345',
    name: '李师傅',
    avatar: 'https://picsum.photos/seed/staff1/100/100',
    phone: '138****5555'
  },
  price: {
    service: 5.00,
    delivery: 2.00,
    discount: 2.00,
    total: 5.00
  },
  reviewed: false
});

// 订单步骤
const orderSteps = [
  { title: '下单成功', time: '2025-04-29 15:25:33' },
  { title: '等待接单', time: '2025-04-29 15:25:33' },
  { title: '服务中', time: '2025-04-29 15:30:22' },
  { title: '已完成', time: '' }
];

// 当前步骤索引
const currentStepIndex = computed(() => {
  if (orderInfo.status === 'pending') return 0;
  if (orderInfo.status === 'processing') return 2;
  if (orderInfo.status === 'completed') return 3;
  if (orderInfo.status === 'cancelled') return -1;
  return 0;
});

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'pending': return '待支付';
    case 'processing': return '服务中';
    case 'completed': return '已完成';
    case 'cancelled': return '已取消';
    default: return '未知状态';
  }
};

// 获取状态描述
const getStatusDescription = (status) => {
  switch (status) {
    case 'pending': return '请尽快完成支付，订单将在15分钟后自动取消';
    case 'processing': return '您的服务正在进行中，请耐心等待';
    case 'completed': return '服务已完成，感谢您的使用';
    case 'cancelled': return '订单已取消，期待再次为您服务';
    default: return '';
  }
};

// 页面加载
onMounted(() => {
  // 获取URL参数
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options;
  
  if (options && options.id) {
    console.log('加载订单ID:', options.id);
    // 根据ID加载订单信息，这里使用模拟数据
    loadOrderDetail(options.id);
  } else {
    uni.showToast({
      title: '订单ID不存在',
      icon: 'none'
    });
    setTimeout(() => {
      uni.navigateBack();
    }, 1500);
  }
});

// 加载订单详情
const loadOrderDetail = (id) => {
  console.log(`加载ID为${id}的订单详情`);
  // 这里模拟不同订单状态
  if (id === '1002') {
    orderInfo.status = 'pending';
    orderInfo.deliveryStaff = null;
  } else if (id === '1003') {
    orderInfo.status = 'completed';
    orderInfo.reviewed = true;
  } else if (id === '1004') {
    orderInfo.status = 'cancelled';
    orderInfo.deliveryStaff = null;
  }
  // 其他ID使用默认订单信息（进行中）
};

// 取消订单
const cancelOrder = () => {
  uni.showModal({
    title: '提示',
    content: '确定要取消该订单吗？',
    success: (res) => {
      if (res.confirm) {
        orderInfo.status = 'cancelled';
        orderInfo.deliveryStaff = null;
        uni.showToast({
          title: '订单已取消',
          icon: 'success'
        });
      }
    }
  });
};

// 支付订单
const payOrder = () => {
  uni.showLoading({
    title: '正在支付...'
  });
  
  // 模拟支付过程
  setTimeout(() => {
    uni.hideLoading();
    orderInfo.status = 'processing';
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });
  }, 1500);
};

// 确认收货/完成
const confirmReceived = () => {
  uni.showModal({
    title: '提示',
    content: '确认服务已完成吗？',
    success: (res) => {
      if (res.confirm) {
        orderInfo.status = 'completed';
        orderSteps[3].time = new Date().toLocaleString('zh', {
          year: 'numeric',
          month: '2-digit',
          day: '2-digit',
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit'
        }).replace(/\//g, '-');
        
        uni.showToast({
          title: '确认完成',
          icon: 'success'
        });
      }
    }
  });
};

// 联系客服
const contactService = () => {
  uni.showToast({
    title: '拨打客服电话',
    icon: 'none'
  });
  // 实际应用中应该调用拨打电话API
};

// 联系配送员
const callDeliveryStaff = () => {
  uni.showToast({
    title: '拨打配送员电话',
    icon: 'none'
  });
  // 实际应用中应该调用拨打电话API
};

// 再次下单
const orderAgain = () => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${orderInfo.service.id}`
  });
};

// 去评价
const goToReview = () => {
  uni.navigateTo({
    url: `/pages/service/review?orderId=${orderInfo.id}`
  });
};

// 删除订单
const deleteOrder = () => {
  uni.showModal({
    title: '提示',
    content: '确定要删除该订单吗？删除后将无法恢复。',
    success: (res) => {
      if (res.confirm) {
        uni.showToast({
          title: '删除成功',
          icon: 'success'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.order-detail {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 80px;
}

.order-status {
  background-color: #07c160;
  padding: 20px 15px;
  display: flex;
  align-items: center;
  
  &__icon {
    margin-right: 15px;
  }
  
  &__text {
    color: #ffffff;
  }
  
  &__title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    display: block;
  }
  
  &__desc {
    font-size: 13px;
    opacity: 0.9;
  }
}

.status-icon {
  font-size: 36px;
  
  &--pending {
    color: #ffffff;
  }
  
  &--processing {
    color: #ffffff;
  }
  
  &--completed {
    color: #ffffff;
  }
  
  &--cancelled {
    color: #ffffff;
  }
}

.order-progress {
  background-color: #ffffff;
  padding: 15px;
  margin-bottom: 10px;
  
  &__item {
    display: flex;
    position: relative;
    padding-bottom: 20px;
    
    &::before {
      content: '';
      position: absolute;
      top: 20px;
      left: 6px;
      width: 1px;
      height: calc(100% - 20px);
      background-color: #e0e0e0;
    }
    
    &--active {
      .order-progress__dot {
        background-color: #07c160;
        border-color: #07c160;
      }
      
      &::before {
        background-color: #07c160;
      }
    }
    
    &--last {
      padding-bottom: 0;
      
      &::before {
        display: none;
      }
    }
  }
  
  &__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    margin-right: 10px;
    flex-shrink: 0;
    margin-top: 3px;
  }
  
  &__content {
    flex: 1;
  }
  
  &__title {
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;
    display: block;
  }
  
  &__time {
    font-size: 12px;
    color: #999;
  }
}

.order-card {
  background-color: #ffffff;
  margin-bottom: 10px;
  
  &__header {
    padding: 12px 15px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  &__title {
    font-size: 15px;
    font-weight: 500;
    color: #333;
  }
  
  &__content {
    padding: 15px;
  }
}

.order-info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  
  &:last-child {
    margin-bottom: 0;
  }
  
  &--total {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
  }
  
  &__label {
    color: #666;
    font-size: 14px;
  }
  
  &__value {
    color: #333;
    font-size: 14px;
    max-width: 70%;
    text-align: right;
    
    &--discount {
      color: #ff6b6b;
    }
    
    &--total {
      font-size: 16px;
      font-weight: bold;
      color: #ff6b6b;
    }
  }
}

.service-item {
  display: flex;
  
  &__image {
    width: 70px;
    height: 70px;
    border-radius: 4px;
    margin-right: 10px;
  }
  
  &__content {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
  
  &__title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
  }
  
  &__option {
    font-size: 12px;
    color: #999;
    margin-bottom: auto;
  }
  
  &__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  &__price {
    font-size: 15px;
    color: #ff6b6b;
    font-weight: 500;
  }
  
  &__quantity {
    font-size: 13px;
    color: #999;
  }
}

.delivery-staff {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  &__info {
    display: flex;
    align-items: center;
  }
  
  &__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  &__detail {
    
  }
  
  &__name {
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;
    display: block;
  }
  
  &__id {
    font-size: 12px;
    color: #999;
  }
  
  &__contact {
    
  }
  
  &__btn {
    background-color: #07c160;
    color: #ffffff;
    font-size: 14px;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    border-radius: 16px;
  }
}

.order-detail__footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 10px 15px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.order-detail__btns {
  display: flex;
  justify-content: flex-end;
}

.order-btn {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  font-size: 14px;
  border-radius: 20px;
  margin-left: 10px;
  
  &--default {
    background-color: #f5f5f5;
    color: #666;
  }
  
  &--primary {
    background-color: #07c160;
    color: #ffffff;
  }
}
</style>
